<template>
  <div>
      <div class="login_wrap">
        <div class="login_left">
            <img src="../../assets/common/login_back.png" alt="">
        </div>
        <div class="login_right">
          <div class="login_form">
            <h1>登录</h1>
            <el-form ref="loginForm" :rules="rules" :model="formObj">
                 <el-form-item prop="mobile">
                    <el-input v-model="formObj.mobile"></el-input>
                 </el-form-item>
                 <el-form-item prop="password">
                    <el-input v-model="formObj.password" show-password type="password"></el-input>
                 </el-form-item>
                 <el-form-item prop="isAgree">
                    <el-checkbox v-model="formObj.isAgree"></el-checkbox>
                    <a href="#" style="margin-left: 20px;">用户平台使用协议</a>
                 </el-form-item>
                 <el-form-item>
                   <el-button @click="toLogin"    :style="{width:'400px'}" type="primary">登录</el-button>
                 </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import {loginApi} from '@/api/common'
// 1. 什么时候调用接口
// 2. 接口需要的参数 如何获取 入参 
// 3. 接口返回的数据如何处理
export default {
  name: 'loginIndex',

  data() {
    return {
        rules:{ //表单的验证规则
          mobile:[
            {required:true,message:"手机号不能为空",trigger:"blur"},
            {pattern:/^1[3-9]\d{9}$/,message:"手机号格式不正确",trigger:"blur"}
          ],
          password:[
            {required:true,message:"密码不能为空",trigger:"blur"},
            {min:6,max:18,message:"密码长度在6-18位之间",trigger:"blur"}
          ],
          isAgree:[{ //自定义规则的回调
              validator:(rule,value,callback)=>{
                // value---表单控件的值
                // callback---回调函数 
                // new Error("请先同意协议") 抛出的错误信息
                 value ?callback():callback(new Error("请先同意协议"))
              }
          }]
      },
      formObj:{ //表单v-model的数据
        mobile:"13800000002",//手机号
        password:"hm#qd@23!",//密码
        isAgree:true//是否同意协议
      }
    }
  },
  methods: {
       toLogin(){
        // ui组件库的 一个组件
        // 1. 属性 能改变 样式，功能
        // 2. 事件 调用函数  事件的形参 通常提供了需要的内容
        // 3. 插槽 slot  可以插入自定义的内容
        // 4. 方法 实现一些功能  先获取组件 在调用方法

        // 调用表单组件的 全局验证方法 
        this.$refs.loginForm.validate(async (vali)=>{
          // vali---true  所有表单控件都通过了  false---有表单控件没有通过
            if(vali){ //表单验证通过
                let res=await loginApi(this.formObj)
                console.log(res,"--------");//
               
                if(res.success){
                     // 登录返回的token 存储到vuex 和localStorage 
                    //  触发actions 保存token
                    this.$store.dispatch("acToken",res.data);
                    // 跳转首页
                    this.$router.replace("/layout/home")
                }else{
                  // 错误提示
                  this.$message.error(res.message)
                }
            }
        })
      



          // // 第二种接口调用写法
          // loginApi(this.formObj).then(res=>{

          // })
      }
  },
};
</script>
<style lang="scss"  scoped>
    .login_wrap{
      display: flex;
       height: 100vh;

      .login_left{
        width: 55%;
        height: 100vh;
        img{
          width: 100%;
          height: 100vh;
        }
      }
      .login_right{
        flex:1;
        display: flex;
        justify-content: center;
        align-items: center;
        .login_form{
          width: 400px;
          height: 500px;
        }
      }
    }
</style>